<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">

  <!--  指令  -->
  <input v-debounce:1000="fn2" type="text">
  <p>{{num}}</p>
<!--  <input v-debounce:1000.input="fn2" type="text">-->
</div>
</body>
<script type="module">
  new Vue({
    el:"#root",
    data:{
      num :1
    },
    methods:{
      fn2(){
        this.num++;
      }
    },
    directives:{
      debounce:{
        bind(el,binds){
          console.log(123);
          const {arg=300} = binds;
          let timer;
          el.addEventListener("input",function(e){
            if(timer) clearTimeout(timer);
            timer = setTimeout(()=>{
              binds.value(e);
            },arg/1)
          })
        }
      }
    }
  })
</script>
</html>